<template>
  <div>
    <div>
      <br>
      <searchTablePagination
                       :searchFormData="searchFormData"
                       :has-form="tableConfig.hasForm"
                       :tableData="tableData"
                       ref="searchtable"
                       :loading="tableLoading"
                       :table-config="tableConfig">
       <div>
         <template>
           <el-form :model="searchFormData" :inline='true' label-width="100px" ref="ruleForm" >
             <div>
               <el-form-item label="配置名称：" prop="a">
                 <el-input v-model="searchFormData.a" clearable placeholder="请输入配置a名称" size="mini"/>
               </el-form-item>
               <el-form-item label="配置名称c:" prop="b">
                 <el-input v-model.trim="searchFormData.b" clearable placeholder="请输入b名称" size="mini"/>
               </el-form-item>
               <el-form-item label="参数标识：" prop="c">
                 <el-select v-model="searchFormData.c" clearable placeholder="请选择参数c标识" size="mini">
                   <el-option label="c1" value="c1"/>
                   <el-option label="c2" value="c2"/>
                 </el-select>
               </el-form-item>
               <el-form-item label="参数标识b：" prop="d">
                 <el-select v-model="searchFormData.d" clearable placeholder="请选择d标识" size="mini">
                   <el-option label="b1" value="b1"/>
                   <el-option label="bb2" value="bb2"/>
                 </el-select>
               </el-form-item>
               <el-form-item label="参数标识e：" prop="e">
                 <el-select v-model="searchFormData.e" clearable placeholder="请选择e标识" size="mini">
                   <el-option label="e1" value="e1"/>
                   <el-option label="e2" value="e2"/>
                 </el-select>
               </el-form-item>
               <el-form-item label="参数标识f：" prop="f">
                 <el-select v-model="searchFormData.f" clearable placeholder="请选择f标识" size="mini">
                   <el-option label="f" value="f"/>
                   <el-option label="f2" value="f2"/>
                 </el-select>
               </el-form-item>
               <el-form-item label="爱好：" prop="hobby">
                 <el-select v-model="searchFormData.hobby" clearable placeholder="请选择hobby" size="mini">
                   <el-option v-for="item in hobbyList" :label="item.label" :value="item.id" :key="item.id"/>
                 </el-select>
               </el-form-item>

           <!--    <el-form-item label="开始时间" prop="startTime">
                 <el-date-picker :picker-options="pickerOptionsStart" v-model="searchFormData.startTime"
                                 type="date" placeholder="选择日期时间" size="mini">
                 </el-date-picker>
               </el-form-item>

               <el-form-item label="结束时间:" prop="endTime">
                 <el-date-picker :picker-options="pickerOptionsEnd" v-model="searchFormData.endTime"
                                 type="date" placeholder="选择日期时间" size="mini">
                 </el-date-picker>
               </el-form-item>-->
             </div>
           </el-form>
         </template>
       </div>
        <template slot="tableExtraOperate">
          <el-button type="primary" icon="el-icon-plus" @click="addConfig" size="mini">新增</el-button>
          <!--          <el-button type="primary" icon="el-icon-upload" @click="exportData($refs.searchtable.selectedRows)" size="mini">多选导出</el-button>-->
          <el-button type="primary" icon="el-icon-upload" @click="exportData($refs.searchtable.selectedRow)" size="mini">单选导出</el-button>
          <br>
          <br>
        </template>

        <template slot="size" slot-scope="scope">
          <div v-if="scope.row.size>30" style="color: chartreuse">{{scope.row.size}}</div>
          <div v-else>{{scope.row.size}}</div>
        </template>

        <template slot="tableOperator" slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" plain @click.native.prevent="editData(scope)"> 修改 </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" plain @click.native.prevent="deleteData(scope)"> 删除 </el-button>
        </template>
      </searchTablePagination>
    </div>

    <Dialog
      :visible="dialogVisible"
      @cancel="cancel"
      @confirm="confirm"
      @handleClose="handleClose">
<!--      <div #>form表单</div>-->
    <div>
      <div slot="left">左</div>
      <div slot="center">中</div>
      <div slot="right">右</div>
    </div>
    </Dialog>
  </div>

</template>

<script>
  import searchTablePagination from "@/views/table/components/Table/searchTablePagination";
  import myPagination from "./components/Pagination"
  import TablePagination from "./components/Table/TablePagination"
  import myTable from "./components/Table"
  import Dialog from "./components/dialog"
  import axios from "axios"
  export default {
    name: "elformtablepagination",
    components: {
      // myPagination,
      // myTable,
      Dialog,
      // TablePagination,
      searchTablePagination
    },
    created() {
      this.getList()
    },
    mounted() {

    },
    data() {
      return {
        tableLoading:false,
        tableConfig: {
          requestUrl:"http://localhost:9090/file/page",
          hasForm:true,
          isRadio: true,
          topOperate: true,
          columnConfig: [
            { prop: 'id', label: 'ID',},
            { prop: 'name', label: '文件名称' },
            { prop: 'type', label: '文件类型' },
            { prop: 'size', label: '文件大小' ,isSlot:true,width: 150},
            { prop: 'name', label: '所属省份' , width: '150',formatter(row){
                // console.log(row)
                if (row.roleType==1){
                  return row.roleType+"@"
                }else{
                  return row.roleType+"@@"
                }

              }},
            { prop: 'operator', label: '操作'}
          ]
        },

        searchFormData: {
          a: "",
          b: "",
          c: "",
          d: "",
          e: "",
          f: "",
          startTime: "",
          endTime: "",
          hobby: ""
        },
        tableData:[],

        hobbyList: [
          {id: 1, label: "吃饭"},
          {id: 2, label: "睡觉"},
          {id: 3, label: "打豆豆"},
        ],
        rules: {
          a: [
            {required: true, message: '请输入', trigger: 'blur'},
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          b: [{required: true, message: '请输入', trigger: 'blur'}],
          c: [{required: true, message: '选择一条', trigger: 'blur'}],
          startTime: [{required: true, message: '开始时间不能为空', trigger: 'change'}],
          endTime: [{required: true, message: '结束时间不能为空', trigger: 'change'}]
        },
        /*时间选择控制*/
        pickerOptionsStart: {
          disabledDate: (time) => {
             if (this.searchFormData.endTime) {
              return time.getTime() > this.searchFormData.endTime;
            }
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            if (this.searchFormData.startTime) {
              return time.getTime() < this.searchFormData.startTime;
            }
           }
          },

        //弹框
        dialogVisible: false
      }
    },
    methods: {
      //
      getList() {

      },

      addConfig() {
        this.$message.success('新增');
      },
      // 导出
      exportData(rows) {

        if (rows.length==0){
          this.$message.warning('选择一个数据');
        }else {
          console.log(rows)
        }

      },

      // 删除
      deleteData(row) {
        console.log(row)
        /*     this.$confirm('删除当前配置的省份登录方式，该省将无法使用当前登录方式登录和装维APP,确定删除改配置？', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
             }).then(() => {
               this.$message.success('删除成功')
               this.$refs.searchTable.handleSearch()
             }).catch(r => {
               this.$message.error('删除失败')
             })*/
      },
      // 编辑
      editData(row) {
        console.log(row)
        this.dialogVisible = true
        // this.$message.success('编辑');
      },

      // 关闭对话框
      handleClose() {
        console.log("关闭对话框")
        this.dialogVisible = false
      },
      // 确认对话框
      confirm() {
        console.log("确认对话框")
        this.dialogVisible = false
      },
      // 取消对话框
      cancel() {
        console.log("取消对话框")
        this.dialogVisible = false
      },

    }
  }
</script>

<style scoped lang="scss">
  .searchForm {
    box-shadow: 0 -12px 8px 13px rgba(0, 0, 0, 0.06);
    color: silver;
    padding: 15px;

    .el-form-item {
      margin-bottom: 20px;
    }
  }


</style>
